import React from 'react'
import CategoryCss from './index.module.scss'
// import { Link } from 'react-router-dom'
class Category extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            typeOne: [],
            thisTypeTow: [],
            thisChange: "101",
            thisTypeThree: ""
        }
    }
    render() {
        return (
            <div className={CategoryCss.main}>
                {/* 头部 */}
                <div className={CategoryCss.header}>
                    {/* 搜索框 */}
                    <div className={CategoryCss.searchBox}>
                        <i className="iconfont icon-icon_ssx"></i>
                        <input type="text" placeholder="搜索/商品/品牌/类别" />
                    </div>
                    {/* 一级分类 */}
                    <ul className={CategoryCss.nav}>
                        {
                            this.state.typeOne.length > 0 &&
                            this.state.typeOne.map((item) => {
                                return (
                                    <li onClick={this.navChange.bind(this, item)} className={this.state.thisChange === item.typeId ? CategoryCss.liChange : ''} key={item.typeId}>{item.title}</li>
                                )
                            })
                        }
                    </ul>
                </div>
                {/* 主体 */}
                <div className={CategoryCss.content}>
                    {/* 二级分类 */}
                    {
                        this.state.thisTypeTow.length > 0 &&
                        this.state.thisTypeTow.map((item) => {
                            return (
                                <div className={CategoryCss.navModule} key={item.typeId}>
                                    <p><span></span>{item.title}</p>
                                    {/* 三级分类 */}
                                    <ul className={CategoryCss.navList} >
                                        {
                                            item.typeThree.map((items) => {
                                                return (
                                                    <li onClick={this.navListChange.bind(this, { "oneId": item.ParentID, "towId": item.typeId, "threeId": items.typeId,"title":items.title })} key={items.typeId} className={this.state.thisTypeThree === items.typeId ? CategoryCss.navListChange : ''}>{items.title}</li>
                                                )
                                            })
                                        }
                                    </ul>
                                </div>
                            )
                        })
                    }

                </div>
            </div>
        )
    }
    // 一级分类选中
    navChange = (e) => {
        // console.log(e)
        this.setState({
            thisChange: e.typeId,
            thisTypeTow: e.typeTow
        })
    }
    // 三级分类跳转
    navListChange = (e) => {
        // console.log(e)
        let one = e.oneId;
        let tow = e.towId;
        let three = e.threeId;
        this.setState({
            thisTypeThree: three
        }, () => {
            this.props.history.push({
                pathname: '/categoryT',
                state: { 
                    one: one,
                    tow:tow,
                    three:three,
                    title:e.title
                 }
            })
           
            // this.props.history.push("/categoryT?one:"+one+"&tow:"+tow+"&three:"+three);
        })
        

    }
    // 页面加载完成
    componentDidMount = () => {
        let exctypeOne = [
            {
                "typeId": "101",
                "title": "隐形眼镜",
                "typeTow": [
                    {
                        "typeId": "201",
                        "title": "热门搜索",
                        "typeThree": [
                            {
                                "typeId": "301",
                                "title": "美若康沐氧"
                            },
                            {
                                "typeId": "302",
                                "title": "欧舒天每日U新"
                            },
                            {
                                "typeId": "303",
                                "title": "硅水凝胶"
                            },
                            {
                                "typeId": "304",
                                "title": "强生舒日"
                            },
                            {
                                "typeId": "305",
                                "title": "库博宝晴润"
                            },
                            {
                                "typeId": "306",
                                "title": "水梯度"
                            },
                            {
                                "typeId": "307",
                                "title": "欧舒适"
                            }

                        ],
                        "ParentID": "101"
                    },
                    {
                        "typeId": "202",
                        "title": "热销品牌",
                        "typeThree": [
                            {
                                "typeId": "308",
                                "title": "美若康"
                            },
                            {
                                "typeId": "309",
                                "title": "欧舒天"
                            },
                            {
                                "typeId": "310",
                                "title": "Refrear"
                            },
                            {
                                "typeId": "311",
                                "title": "库博"
                            },
                            {
                                "typeId": "312",
                                "title": "爱尔康"
                            },
                            {
                                "typeId": "313",
                                "title": "博士伦"
                            },
                            {
                                "typeId": "314",
                                "title": "强生"
                            },
                            {
                                "typeId": "315",
                                "title": "菲士康"
                            },
                            {
                                "typeId": "316",
                                "title": "更多品牌"
                            }
                        ],
                        "ParentID": "101"
                    },
                    {
                        "typeId": "203",
                        "title": "抛弃周期",
                        "typeThree": [
                            {
                                "typeId": "317",
                                "title": "日抛"
                            },
                            {
                                "typeId": "318",
                                "title": "双周抛"
                            },
                            {
                                "typeId": "319",
                                "title": "月抛"
                            },
                            {
                                "typeId": "320",
                                "title": "半年抛"
                            },
                            {
                                "typeId": "321",
                                "title": "年抛"
                            }
                        ],
                        "ParentID": "101"
                    },
                    {
                        "typeId": "204",
                        "title": "镜片特点",
                        "typeThree": [
                            {
                                "typeId": "322",
                                "title": "高透氧"
                            },
                            {
                                "typeId": "323",
                                "title": "散光/远视"
                            },
                            {
                                "typeId": "324",
                                "title": "高度数"
                            }
                        ],
                        "ParentID": "101"
                    }

                ]
            },
            {
                "typeId": "102",
                "title": "彩色隐形眼镜",
                "typeTow": [
                    {
                        "typeId": "205",
                        "title": "热销品牌",
                        "typeThree": [
                            {
                                "typeId": "325",
                                "title": "T-Garden"
                            },
                            {
                                "typeId": "326",
                                "title": "领丽秀"
                            },
                            {
                                "typeId": "327",
                                "title": "安目瞳"
                            },
                            {
                                "typeId": "328",
                                "title": "实瞳"
                            },
                            {
                                "typeId": "329",
                                "title": "EverColor"
                            },
                            {
                                "typeId": "330",
                                "title": "NEO"
                            },
                            {
                                "typeId": "331",
                                "title": "人鱼姬"
                            },
                            {
                                "typeId": "332",
                                "title": "茵洛"
                            },
                            {
                                "typeId": "333",
                                "title": "Envie"
                            },
                            {
                                "typeId": "334",
                                "title": "更多品牌"
                            }
                        ],
                        "ParentID": "102"
                    },
                    {
                        "typeId": "206",
                        "title": "人气系列",
                        "typeThree": [
                            {
                                "typeId": "335",
                                "title": "爱谢/erouge"
                            },
                            {
                                "typeId": "336",
                                "title": "Givre"
                            },
                            {
                                "typeId": "337",
                                "title": "安目瞳/伞语"
                            }, {
                                "typeId": "338",
                                "title": "陌森/星座系列"
                            },
                            {
                                "typeId": "339",
                                "title": "美若康/绽美"
                            },
                            {
                                "typeId": "340",
                                "title": "实瞳/可芙蕾"
                            }
                        ],
                        "ParentID": "102"
                    },
                    {
                        "typeId": "207",
                        "title": "抛弃周期",
                        "typeThree": [
                            {
                                "typeId": "341",
                                "title": "日抛"
                            },
                            {
                                "typeId": "342",
                                "title": "双周抛"
                            },
                            {
                                "typeId": "343",
                                "title": "月抛"
                            },
                            {
                                "typeId": "344",
                                "title": "半年抛"
                            },
                            {
                                "typeId": "345",
                                "title": "年抛"
                            }
                        ],
                        "ParentID": "102"
                    }
                ]
            },
            {
                "typeId": "103",
                "title": "护理品",
                "typeTow": [
                    {
                        "typeId": "208",
                        "title": "护理液",
                        "typeThree": [
                            {
                                "typeId": "346",
                                "title": "爱尔康/傲滴"
                            },
                            {
                                "typeId": "347",
                                "title": "博士伦/博乐纯"
                            },
                            {
                                "typeId": "348",
                                "title": "视康/双氧水"
                            },
                            {
                                "typeId": "349",
                                "title": "乐敦清"
                            },
                            {
                                "typeId": "350",
                                "title": "海昌/视护能"
                            },
                            {
                                "typeId": "351",
                                "title": "澜柏/高端"
                            },
                            {
                                "typeId": "352",
                                "title": "人鱼姬"
                            },
                            {
                                "typeId": "353",
                                "title": "菲士康"
                            },
                            {
                                "typeId": "354",
                                "title": "更多"
                            }
                        ],
                        "ParentID": "103"
                    },
                    {
                        "typeId": "209",
                        "title": "RGP硬镜护理",
                        "typeThree": [
                            {
                                "typeId": "355",
                                "title": "博视频"
                            },
                            {
                                "typeId": "356",
                                "title": "美尼康"
                            },
                            {
                                "typeId": "357",
                                "title": "培克能"
                            },
                            {
                                "typeId": "358",
                                "title": "RGP硬性镜盒"
                            }
                        ],
                        "ParentID": "103"
                    },
                    {
                        "typeId": "210",
                        "title": "眼部洗眼液",
                        "typeThree": [
                            {
                                "typeId": "359",
                                "title": "日本科奈美"
                            }
                        ],
                        "ParentID": "103"
                    },
                    {
                        "typeId": "211",
                        "title": "润眼液",
                        "typeThree": [
                            {
                                "typeId": "360",
                                "title": "安目瞳"
                            },
                            {
                                "typeId": "361",
                                "title": "强生冰蓝"
                            },
                            {
                                "typeId": "362",
                                "title": "爱尔康"
                            },
                            {
                                "typeId": "363",
                                "title": "博士伦"
                            }
                        ],
                        "ParentID": "103"
                    },
                    {
                        "typeId": "212",
                        "title": "伴侣盒",
                        "typeThree": [
                            {
                                "typeId": "364",
                                "title": "holy nara护理盒"
                            },
                            {
                                "typeId": "365",
                                "title": "Mooluns眸论"
                            },
                            {
                                "typeId": "366",
                                "title": "凯达/好品质"
                            }
                        ],
                        "ParentID": "103"
                    },
                    {
                        "typeId": "213",
                        "title": "眼部周边",
                        "typeThree": [
                            {
                                "typeId": "367",
                                "title": "蒸汽眼罩"
                            },
                            {
                                "typeId": "368",
                                "title": "隐形眼镜清洗器"
                            }
                        ],
                        "ParentID": "103"
                    }

                ]
            }
        ]
        this.setState({
            typeOne: exctypeOne,
            thisTypeTow: exctypeOne[0].typeTow,
            thisChange: exctypeOne[0].typeId
        })

    }
    componentWillUnmount() {

        // 卸载异步操作设置状态
        this.setState = (state, callback) => {
            return;
        }
    }
}
export default Category;